<template>
  <div>
    <el-button
      type="success"
      plain
      icon="edit"
      @click="showDialog"
      :disabled="selection.length !== 1"
      :loading="buttonLoading"
    >
      修改
    </el-button>
    <el-dialog
      title="修改职务"
      v-model="dialogVisible"
      width="30%"
      style="border-radius: 10px; padding: 5px 10px"
      @opened="opened"
      @closed="checkStrictly = true"
    >
      <el-form
        label-position="right"
        label-width="80px"
        :model="commitForm"
        :rules="rules"
        ref="ruleFormRef"
        status-icon
      >
        <el-form-item label="职务名称" prop="roleName">
          <el-input
            v-model="commitForm.roleName"
            placeholder="职务名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="commitForm.state">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="commitForm.remark" type="textarea" />
        </el-form-item>
        <el-form-item label="菜单权限">
          <el-tree
            ref="treeRef"
            style="width: 100%"
            :data="data"
            show-checkbox
            node-key="id"
            :check-strictly="checkStrictly"
          >
            <template #default="{ data }">
              <span class="menu">
                <span>{{ data.label }}</span>
                <el-tag :type="type(data.type)" size="small">
                  {{ test(data.type) }}
                </el-tag>
              </span>
            </template>
          </el-tree>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getRoleInfo,
  updateRole,
  getMenu,
  getMenuIds,
} from "@/service/api/role";
import eventBus from "@/utils/event-bus";
import rules from "@/utils/rules";

const ruleFormRef = ref();
const treeRef = ref();
const buttonLoading = ref(false);
const dialogVisible = ref(false);
const checkStrictly = ref(true);
const data = ref([]);
const menuIds = ref([]);
const commitForm = ref({
  id: "",
  roleName: "",
  state: 1,
  remark: "",
  menu: [],
});

const props = defineProps({
  selection: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["getRoleList"]);

const showDialog = async () => {
  if (props.selection.length === 1) {
    menuIds.value = await getMenuIds(props.selection[0].id);
    data.value = await getMenu();
    const res = await getRoleInfo(props.selection[0].id);

    eventBus.emit("updateRoleId", props.selection[0].id);
    commitForm.value = {
      id: res.id,
      roleName: res.roleName,
      state: res.state,
      remark: res.remark,
    };
    dialogVisible.value = true;
  }
};

//提交表单
const submitForm = (formEl) => {
  commitForm.value.menu = treeRef.value.getCheckedNodes(false, true);
  formEl.validate(async (valid) => {
    if (valid) {
      await updateRole(commitForm.value);
      resetForm();
      emit("getRoleList");
      checkStrictly.value = true;
    } else {
      return false;
    }
  });
};

const opened = () => {
  checkStrictly.value = false;
  treeRef.value.setCheckedKeys(menuIds.value, false);
};

//重置表单内容
const resetForm = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};

const type = (type) => {
  if (type === 1) return "primary";
  else if (type === 2) return "success";
  else return "warning";
};

const test = (type) => {
  if (type === 1) return "目录";
  else if (type === 2) return "菜单";
  else return "按钮";
};
</script>
<style lang="scss">
.menu {
  display: inline-flex;
  width: 60%;
  justify-content: space-between;
  align-items: center;
}
</style>
